<template>
    <div class="area-select">
        <el-cascader
            :props="props"
            v-bind="attr"
            :style="{ width }"
            v-model="areaValue"
            :options="newOptions"
            @change="handleChange"
        ></el-cascader>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

import area from '@/utils/area'
import { apiPostList } from '@/api/distribution/distribution'

@Component
export default class AreaSelects extends Vue {
    /** S Props **/
    @Prop() area_id!: any // 地址ID
    @Prop({ default: () => ({}) }) props: any
    // 表单宽度
    @Prop({ default: '380px' }) width!: string
    @Prop({ default: () => ({}) }) attr!: any
    @Prop({ default: 0 }) areaLevel!: Number

    /** E Props **/
    // created() {
    //     apiPostList({

    //     }).then(res=>{
    //         console.log(res);

    //     })
    // }

    /** S Data **/
    options: Array<object> = area // 地区列表
    /** S Data **/

    /** S Computed **/
    // 更新绑定数据
    get areaValue(): Array<number> {
        return this.area_id
    }

    handleChange(e: any) {
        this.$emit('change', e)
    }

    set areaValue(value) {
        console.log('变了没有')
        this.$emit('update:area_id', value)
    }
    get newOptions() {
        if (this.areaLevel === 1) {
            return this.getSelfData(area)
        }
        if (this.areaLevel === 2) {
            return area.map(item => {
                return {
                    label: item.label,
                    pid: item.pid,
                    value: item.value,
                    children: this.getSelfData(item.children || [])
                }
            })
        }
        return area
    }
    /** E Computed **/

    getSelfData(list: any[]) {
        return list.map(item => {
            return {
                label: item.label,
                pid: item.pid,
                value: item.value
            }
        })
    }
}
</script>
